<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jquery实现仿京东楼梯效果-jq22.com</title>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #menu {
        position: fixed;
        top: 25%;
        left: 40px;
        width: 30px;
        border: 1px solid;
      }
      #menu ul li {
        position: relative;
        width: 30px;
        height: 30px;
        list-style: none;
        text-align: center;
        line-height: 30px;
        font-size: 12px;
        cursor: pointer;
        border-bottom: 1px dotted #aaaaaa;
      }
      #menu ul li.last {
        background: #ccc;
        color: black;
        border-bottom: none;
      }
      #menu ul li span {
        display: none;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 0;
        left: 0;
        color: red;
      }
      #menu ul li:hover span {
        display: block;
        background: darkred;
        color: white;
      }
      #menu ul li span.active {
        display: block;
        background: darkred;
        color: white;
      }
      #menu ul li:hover span.active {
        display: block;
        background: darkred;
        color: white;
      }
      #header,
      #main,
      #footer {
        margin: auto;
        width: 1000px;
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        line-height: 500px;
      }
      #main div {
        height: 700px;
        font-size: 50px;
        color: honeydew;
        line-height: 700px;
      }
      #header {
        height: 500px;
        background: #ccc;
      }
      #footer {
        height: 500px;
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <div id="menu">
      <ul>
        <li>1F <span>服饰</span></li>
        <li>2F <span>美妆</span></li>
        <li>3F <span>手机</span></li>
        <li>4F <span>家电</span></li>
        <li>5F <span>数码</span></li>
        <li>6F <span>运动</span></li>
        <li>7F <span>居家</span></li>
        <li>8F <span>母婴</span></li>
        <li>9F <span>食品</span></li>
        <li>10F <span>图书</span></li>
        <li>11F <span>服务</span></li>
        <li class="last">Top</li>
      </ul>
    </div>

    <!--楼层内容开始-->
    <div id="header">头部</div>
    <div id="main">
      <div class="Louti" style="background: #ff0000">服饰</div>
      <div class="Louti" style="background: #ff7f00">美妆</div>
      <div class="Louti" style="background: #ffff00">手机</div>
      <div class="Louti" style="background: #00ff00">家电</div>
      <div class="Louti" style="background: #00ffff">数码</div>
      <div class="Louti" style="background: #0000ff">运动</div>
      <div class="Louti" style="background: #8b00ff">居家</div>
      <div class="Louti" style="background: aquamarine">母婴</div>
      <div class="Louti" style="background: pink">食品</div>
      <div class="Louti" style="background: bisque">图书</div>
      <div class="Louti" style="background: lightgoldenrodyellow">服务</div>
    </div>
    <div id="footer">尾部</div>
    <!--楼层内容结束-->
    <script>
      var flag = true; //控制 当点击楼层号时，禁止滚动条的代码执行   值为true时，可以执行滚动条代码
      //  根据楼层号 控制滚走的距离
      // 1、除了top的楼梯号，为每一个楼梯号添加一个click，控制楼梯滚走的距离（距离：当前楼层的offset().top ）
      $("#menu li:not(:last)").click(function () {
        flag = false;
        //当前点击的楼号红色的 其余黑色的
        $(this)
          .find("span")
          .addClass("active")
          .end()
          .siblings()
          .find("span")
          .removeClass("active");
        //获取当前楼号对应楼层的 top值
        var sTop = $(".Louti").eq($(this).index()).offset().top;

        //将页面滚走的距离设置为  sTop
        $("body,html").animate(
          {
            scrollTop: sTop,
          },
          1000,
          function () {
            flag = true;
          }
        );
      });
      //2、点击top   回到顶部
      $("#menu li:last").click(function () {
        $("body,html").animate(
          {
            scrollTop: 0,
          },
          1000
        );
        $("#menu li span").removeClass("active");
      });

      //3、 滚动条滚动 --  找到当前楼层的索引    控制楼层号
      $(window).scroll(function () {
        //如果flag  为true   可以执行滚动条的代码
        if (flag) {
          //获取页面滚走的距离
          var sTop = $(document).scrollTop();
          //filter  返回满足条件的那个对象
          //找到满足某个条件的楼层对象
          var $floor = $(".Louti").filter(function (index, ele) {
            return Math.abs($(this).offset().top - sTop) < $(this).height() / 2;
          });

          //根据楼层的索引 设置楼梯号的 样式
          $("#menu li")
            .eq($floor.index())
            .find("span")
            .addClass("active")
            .end()
            .siblings()
            .find("span")
            .removeClass("active");
        }
      });

      //        方法二：

      //        $(document).scroll(function() {
      //            if($(document).scrollTop() >= 500) {
      //                $("#menu").fadeIn(500);
      //                var i = Math.floor(($(document).scrollTop() - 500) / 700);
      //                $("ul li").eq(i).children("span").addClass("active");
      //                $("ul li").eq(i).siblings().children("span").removeClass("active")
      //            }else{
      //                $("#menu").fadeOut(333);
      //            }
      //        })
      //
      //
      //        $("ul li").not(".last").click(function() {
      //            $("body,html").animate({ "scrollTop": $(this).index() * 700 + 500 }, 666)
      //        })
      //
      //        $(".last").click(function(){
      //            $("body").animate({ "scrollTop":0 },500);
      //        })
    </script>
  </body>
</html>
